import { View } from '@tarojs/components';
import { CCardStatusInfoCustom, CBlockCustom } from '@vh-mobile/pro-components';

export default () => {
  const data = {
    id: 1,
    type: '类型1类型1类型1类型1类型1类型1类型1类型1类型1类型1',
    status: '审批中',
    projectName: '花样年香门第花样年香门第花样年香门第花样年香门第花样年香门第',
    lastAuditBy: '张哈哈张哈哈张哈哈张哈哈张哈哈张哈哈张哈哈张哈哈',
  };

  const data1 = {
    id: 1,
    statusColor: 'red',
    type: '类型1类型1类型1类型1类型1类型1类型1类型1类型1类型1',
    status: '审批中',
    projectName: '花样年香门第花样年香门第花样年香门第花样年香门第花样年香门第',
    lastAuditBy: '张哈哈张哈哈张哈哈张哈哈张哈哈张哈哈张哈哈张哈哈',
  };
  const data2 = {
    id: 1,
    statusCustomColor: '#b419b9',
    type: '类型',
    status: '审批中',
    projectName: '花样年香门第',
    lastAuditBy: '张哈哈',
  };

  const data3 = {
    id: 1,
    type: '类型',
    status: '审批中',
    projectName: '花样年香门第',
    lastAuditBy: '张哈哈',
  };

  const data4 = {
    id: 1,
    type: '类型',
    statusCustomColor: '#b419b9',
    status: '审批中',
    projectName: '花样年香门第',
    lastAuditBy: '张哈哈',
  };

  return (
    <View style={{ minHeight: '100vh', backgroundColor: '#f7f7f7' }}>
      <CBlockCustom title="普通卡片">
        <CCardStatusInfoCustom
          key={data.id}
          data={data}
          fieldObj={{
            title: {
              label: '类型',
              value: 'type',
            },
            status: {
              value: 'status',
            },
            columns: [
              {
                label: '关联项目',
                value: 'projectName',
              },
              {
                label: '最近审批人',
                value: 'lastAuditBy',
              },
            ],
          }}
        />
      </CBlockCustom>

      <CBlockCustom title="换行普通卡片">
        <CCardStatusInfoCustom
          key={data1.id}
          data={data1}
          fieldObj={{
            title: {
              label: '类型',
              value: 'type',
            },
            status: {
              value: 'status',
            },
            columns: [
              {
                label: '关联项目',
                value: 'projectName',
              },
              {
                label: '最近审批人',
                value: 'lastAuditBy',
              },
            ],
          }}
          titleEllipsis={false}
          contentEllipsis={false}
        />
      </CBlockCustom>
      <CBlockCustom title="可以隐藏title和status">
        <CCardStatusInfoCustom
          key={data2.id}
          data={data2}
          fieldObj={{
            // title: {
            //   label: '类型',
            //   value: 'type',
            // },
            // status: {
            //   value: 'status',
            // },
            columns: [
              {
                label: '关联项目',
                value: 'projectName',
              },
              {
                label: '最近审批人',
                value: 'lastAuditBy',
              },
            ],
          }}
          titleEllipsis={false}
          contentEllipsis={false}
        />
      </CBlockCustom>
      <CBlockCustom title="可以隐藏content">
        <CCardStatusInfoCustom
          key={data3.id}
          data={data3}
          fieldObj={{
            title: {
              label: '类型',
              value: 'type',
            },
            status: {
              value: 'status',
            },
            statusTag: false,
          }}
          titleEllipsis={false}
          contentEllipsis={false}
        />
      </CBlockCustom>
      <CBlockCustom title="自定义内容栏数和内容">
        <CCardStatusInfoCustom
          key={data4.id}
          data={data4}
          columnsNum={3}
          fieldObj={{
            statusTag: false,
            title: {
              label: '类型',
              value: 'type',
            },
            status: {
              value: 'status',
            },
            columns: [
              {
                label: '关联项目',
                value: 'projectName',
                width: '100%', //可以单独为每个设置
              },
              {
                label: '最近审批人',
                value: 'lastAuditBy',
                width: '50%', //可以单独为每个设置
              },
              {
                label: '关联项目',
                value: 'projectName',
                width: '50%', //可以单独为每个设置
              },
              {
                label: '最近审批人',
                value: 'lastAuditBy',
              },
              {
                label: '关联项目',
                value: 'projectName',
              },
              {
                label: '最近审批人',
                value: 'lastAuditBy',
              },
              {
                label: '详情页',
                value: (d) => {
                  console.log('====================================');
                  console.log(d);
                  console.log('====================================');
                  return <>自定义</>;
                },
              },
            ],
          }}
        />
      </CBlockCustom>
      <CBlockCustom title="多风格排序">
        <CCardStatusInfoCustom
          key={data2.id}
          data={data2}
          columnsNum={3}
          fieldObj={{
            title: {
              label: '类型',
              value: 'type',
            },
            status: {
              value: 'status',
            },
            columns: [
              {
                label: '关联项目',
                value: 'projectName',
                width: '100%', //可以单独为每个设置
              },
              {
                label: '最近审批人',
                value: 'lastAuditBy',
                width: '50%', //可以单独为每个设置
              },
              {
                label: '关联项目',
                value: 'projectName',
                width: '50%', //可以单独为每个设置
              },
              {
                label: '最近审批人',
                value: 'lastAuditBy',
                direction: 'vertical',
                width: '33%',
              },
              {
                label: '关联项目',
                value: 'projectName',
                direction: 'vertical',
                width: '33%',
              },
              {
                label: '最近审批人',
                value: 'lastAuditBy',
                direction: 'vertical',
                width: '33%',
              },
            ],
          }}
        />
      </CBlockCustom>
      <CBlockCustom title="开启工具栏">
        <CCardStatusInfoCustom
          key={data2.id}
          data={data2}
          header={true}
          tools={[
            {
              key: 'phone',
              iconName: 'phone',
              iconRender: () => {
                return '自定义';
              },
            },
            {
              key: 'chat',
              iconName: 'chat',
              iconColor: 'red',
            },
          ]}
          toolClick={(d, i) => {
            console.log(d, i);
          }}
          fieldObj={{
            title: {
              label: '类型',
              value: 'type',
            },
            status: {
              value: 'status',
            },
            columns: [
              {
                label: '关联项目',
                value: 'projectName',
              },
              {
                label: '最近审批人',
                value: 'lastAuditBy',
              },
            ],
          }}
        />
      </CBlockCustom>
      <CBlockCustom title="开启选择">
        <CCardStatusInfoCustom
          key={data2.id}
          data={data2}
          showSelect={true}
          tools={[
            {
              key: 'phone',
              iconName: 'phone',
              iconRender: () => {
                return '自定义';
              },
            },
            {
              key: 'chat',
              iconName: 'chat',
              iconColor: 'red',
            },
          ]}
          toolClick={(d, i) => {
            console.log(d, i);
          }}
          fieldObj={{
            title: {
              label: '类型',
              value: 'type',
            },
            status: {
              value: 'status',
            },
            columns: [
              {
                label: '关联项目',
                value: 'projectName',
              },
              {
                label: '最近审批人',
                value: 'lastAuditBy',
              },
            ],
          }}
        />
        <CCardStatusInfoCustom
          key={data1.id}
          data={data1}
          showSelect={true}
          isSelect={true}
          fieldObj={{
            title: {
              label: '类型',
              value: 'type',
            },
            status: {
              value: 'status',
            },
            columns: [
              {
                label: '关联项目',
                value: 'projectName',
              },
              {
                label: '最近审批人',
                value: 'lastAuditBy',
              },
            ],
          }}
        />
      </CBlockCustom>
      <CBlockCustom title="使用卡片顶部和底部">
        <CCardStatusInfoCustom
          key={data.id}
          data={data}
          onClick={(d: any) => {
            console.log('===================');
            console.log(d);
            console.log('===================');
          }}
          header={true}
          headerRender={(d: any) => {
            console.log(d);
            return '自定义';
          }}
          bottom={true}
          bottomRender={() => {
            return <>综艺</>;
          }}
          fieldObj={{
            title: {
              label: '类型',
              value: 'type',
            },
            status: {
              value: 'status',
            },
            columns: [
              {
                label: '关联项目',
                value: 'projectName',
              },
              {
                label: '最近审批人',
                value: 'lastAuditBy',
              },
            ],
          }}
          cellProps={{
            clickable: false,
          }}
        />
      </CBlockCustom>
    </View>
  );
};
